<template>
	<view class="referral-code">
		<view class="own-one">
			<image class="own-img" src="../../static/img/index1/u204.png"></image>
		</view>
		<view class="application-banner"></view>

		<view v-if="recommender===1" class="no-application">
			<view class="">
				<text>您还未获得推荐人资格</text>
				<view class="no-application-btn" @tap="clickApplication(2)">
					申请成为推荐人
				</view>
			</view>
		</view>

		<view v-if="recommender===2" class="application-ing">

			<view class="input-class">
				<label>申请人:</label>
				<input type="text" value="" placeholder="请输入真实姓名" />
			</view>
			<view class="input-class">
				<label>联系电话:</label>
				<input type="text" value="" placeholder="请输入联系电话" />
			</view>
			<view class="input-class">
				<label>身份证号:</label>
				<input type="text" value="" placeholder="请输入18位身份证号码" />
			</view>
			<view class="input-class">
				<label>联系地址:</label>
				<input type="text" value="" placeholder="请输入联系地址" />
			</view>
			<label style="font-size: 13px;">我们将在1~2个工作日内进行审核，届时将会与您联系，请确保填写的联系电话畅通</label>

			<view class="application-ing-bottom">
				<view class="application-ing-btn" @tap="clickApplication(3)">
					提交申请
				</view>
			</view>

		</view>

		<view v-if="recommender===3" class="application-ed">

			<image src="/static/img/own/u972.png" mode=""></image>
			<text class="application-code">推荐码: sy13942</text>
			<view class="application-ed-text">
				<text>推荐码可用于注册时填写！</text>
				<text>二维码可通过首页扫一扫进行推荐关联！</text>
			</view>
			
			<view class="application-banner"></view>

			<view class="application-ed-bottom">

				<text>推荐收益请至微信小程序诗悦人脉查看</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommender: 1, // 1-未申请  2-填写申请  3--已成为
				info: {
					applicant: "",
					concat: "",
					idCard: "",
					address: ""
				}
			}
		},
		methods: {
			clickApplication(idx) {
				this.recommender = idx;
			}
		}
	}
</script>

<style lang="scss">
	.referral-code {
		color: #333333;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.own-one {
			padding: 0px;
		}

		.own-img {
			vertical-align: middle;
			box-sizing: border-box;
			width: 750upx;
			height: 340upx;
		}

		.no-application {
			height: 376px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			text-align: center;
		}

		.no-application-btn {
			margin-top: 10px;
			border-radius: 5px;
			background-color: rgba(194, 77, 80, 1);
			font-weight: 400;
			font-style: normal;
			color: #FFFFFF;
			box-sizing: border-box;
			// padding: 5px;
		}

		.application-ing {
			margin: 20px;
		}

		.input-class {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			label {
				width: 20%;
				font-size: 14px;
			}

			input {
				width: 70%;
				border: 2px solid rgb(153, 153, 153);
			}

			margin: 10px 0px;
		}

		.application-ing-bottom {
			// border: 1px solid black;

			text-align: center;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}

		.application-ing-btn {
			margin-top: 40px;
			border-radius: 5px;
			background-color: rgba(194, 77, 80, 1);
			font-weight: 400;
			font-style: normal;
			color: #FFFFFF;
			box-sizing: border-box;
			width: 115px;
			height: 38px;
			// padding: 20px;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.application-ed {
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-top: 40px;

			image {
				width: 153px;
				height: 153px;
			}
		}

		.application-code {
			margin-top: 20px;
			font-weight: 650;
			font-style: normal;
			color: rgb(194, 77, 80);
			font-size: 18px;
		}

		.application-ed-text {
			margin-top: 20px;
			margin-bottom: 20px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			
			color: rgb(51, 51, 51);
			font-size: 14px;
			font-weight: 400;
			font-style: normal;
			text-align: center;
			line-height: 1.4;
		}
		
		.application-ed-bottom {
			position: absolute;
			bottom: 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 100%;
			height: 75px;
			text-align: center;
			font-size: 14px;
			color: rgb(51, 51, 51);
		}
		
		.application-banner {
			background-color: rgba(242, 242, 242, 1);
			height: 10px;
			width: 100%;
		}
	}
</style>
